<template>
	<view class="content-wrap">
		<view class="box-wrap">
			<view class="quick-choose">
				<view class="quickTimeWrap">
					<view class="timeItem active">
						今日大盘：<text id="c_riqi">{{nowDate}}</text>
					</view>
				</view>
				<view class="service-btn">
					<view class="tiny-select tiny-checkbox-wrapper tiny-select-checked service-radio">
						<view class="tiny-select-content">
							含服务费
						</view>
						<label>
							<view class="tiny-select-inner tiny-checkbox-inner"></view>
							<input type="checkbox" class="tiny-select-input" id="c_fuwufei" autocomplete="off"
								data_zt="1" value="on" />
						</label>
					</view>
				</view>
			</view>
			<view class="box">
				<view class="box-dashboard">
					<view class="national-box">
						<view class="boxOffice-num">
							<text class="num">{{totalBoxDesc.toFixed(2)}} </text>万
						</view>
					</view>
				</view>
				<text class="nowTime">
					北京时间 <text id="c_time">{{currentTime}}</text>
				</text>
			</view>
		</view>
		<view class="box-table">
			<text class="table-title">票房排名</text>
			<table class="table-content">
				<thead class="table-head">
					<tr class="movie-tr-th">
						<th class="title-col title-col-name">
							影片
						</th>
						<th class="title-col title-col-box">
							<text class="red-color">综合</text>票房
							<br />
							<text>(万元)</text>
						</th>
						<th class="title-col title-col-boxRate">
							<text class="red-color">综合</text>票房
							<br />
							<text>占比</text>
						</th>
						<th class="title-col title-col-countRate">
							排片占比
						</th>
						<th class="title-col title-col-seatRate">
							上座率
						</th>
					</tr>
				</thead>
				<tbody class="table-body" id="c_biaoge">
					<tr class="body-row" v-for="(item,index) in movies" :key="item">
						<td class="tbody-col tbody-col-name">
							<div class="name-wrap">
								<text class="movie-name">{{item.movieName}}</text>
								<text class="web-info">
									<span class="releaseInfo">{{item.releaseInfo}}</span>
									<span class="sumBox">{{item.sumBox}}</span>
								</text>
							</div>
						</td>
						<td class="tbody-col">
							<div class="boxDesc-wrap red-color">{{item.boxDesc}}</div>
						</td>
						<td class="tbody-col">
							<div class="boxRate-wrap">{{item.boxRate}}</div>
						</td>
						<td class="tbody-col">
							<div class="countRate-wrap">{{item.countRate}}</div>
						</td>
						<td class="tbody-col">
							<div class="seatRate-wrap">{{item.seatRate}}</div>
						</td>
					</tr>
					<!-- Add more rows here as needed -->
				</tbody>
			</table>
		</view>
	</view>


</template>

<script>
	import {
		format
	} from 'date-fns';
	export default {
		data() {
			return {
				movies: [],
				nowDate: '',
				currentTime:'',
				totalBoxDesc:''
			}
		},
		created() {
			// 在组件创建时获取当前时间
			this.getCurrentTime();
			// 在组件创建时启动定时器
			this.startTimer();
		},

		mounted() {

			this.getMovice()
		},

		destroyed() {
			// 在组件销毁时清除定时器，防止内存泄漏
			this.stopTimer();
		},
		methods: {
			getMovice() {
				this.$request.get('/movie-box-office/list', {}).then(res => {
					console.log(res);
					this.movies = res.data.movies
					this.totalBoxDesc=res.data.totalBoxDesc
				})
			},
			getCurrentTime() {
				// 获取当前时间，并格式化成 "YYYY-MM-DD" 形式
				// 获取当前时间
				let currentDate = new Date();

				// 格式化成 "yyyy-mm-dd" 格式
				let formattedDate = format(currentDate, 'yyyy-MM-dd');
				this.nowDate = formattedDate
			},
			startTimer() {
				// 每秒更新一次时间
				this.timer = setInterval(() => {
					this.CurrentTime();
				}, 1000);
			},
			stopTimer() {
				// 清除定时器
				clearInterval(this.timer);
			},
			CurrentTime() {
				// 获取当前时间
				const now = new Date();

				// 提取时分秒
				const hours = now.getHours();
				const minutes = now.getMinutes();
				const seconds = now.getSeconds();

				// 格式化成 "HH:mm:ss" 形式
				this.currentTime = `${this.padZero(hours)}:${this.padZero(minutes)}:${this.padZero(seconds)}`;
			},
			padZero(value) {
				// 在单个数字前补零
				return value < 10 ? `0${value}` : value;
			},
		}
	}
</script>

<style>
</style>